@import './reset';

.container{
	width: 100%;
	background: #F5F8FA;
	overflow: hidden;
	box-sizing: border-box;
	padding-bottom: calculateRem(58px);
	.top{
		width: 100%;
		height: auto;
		background: white;
		.empty{
			width: 100%;
			height: auto;
			overflow: hidden;
			text-align: center;
			>img{
				width: calculateRem(50px);
				height: calculateRem(50px);
				margin-top: calculateRem(40px);

			}
			>p{
				font-size: calculateRem(17px);
				line-height: calculateRem(24px);
				margin-top: calculateRem(16px);
				margin-bottom: calculateRem(39px);
				color: #5C656B;

			}
		}
	}

	.product-wrap{
		width: 100%;
		height: auto;
		background: white;
		margin-top: calculateRem(16px);
		/*margin-bottom: calculateRem(16px);*/
		.title{
			height: calculateRem(32px);
			line-height: calculateRem(47px);
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			>span{
				font-size: 16px;
				color: #333;
				font-weight: bold;
				&:before{
					content: '';
					display: inline-block;
					width: calculateRem(4px);
					height: calculateRem(16px);
					background: #F21612;
					margin-right: calculateRem(8px);
					vertical-align: -2px;
				}
			}
		}
		.lists-wrap{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 0 calculateRem(16px);
			.list{
				width: 100%;
				height: auto;
				box-sizing: border-box;
				border-bottom: 1px solid #EAEAEA;
				padding: calculateRem(14px) 0;
				&:active{
					background-color: #fbfbfb;
				}
				.list-l{
					width: calculateRem(80px);
					height: calculateRem(80px);
					margin-right: calculateRem(15px);
					overflow: hidden;
					>img{
						width: 100%;
						height: 100%;
					}

				}
				.list-r{
					max-width: 72%;
					.t{
						width: 100%;
						height: calculateRem(22px);
						line-height: calculateRem(22px);
						font-size: calculateRem(16px);
						color: #333;
						font-weight: bold;
						@include ell;

					}
					.content{
						width: 100%;
						height: calculateRem(60px);
						line-height: calculateRem(20px);
						color: #4b4b4b;
						font-size: calculateRem(14px);
						@include break;
						@include mulell(3);
						overflow: hidden;

					}

				}

			}
			
		}
		.more{
			display: block;
			width: 100%;
			height: calculateRem(48px);
			line-height: calculateRem(48px);
			text-align: center;
			&:active{
				background-color: #fafafa;
			}
			>span{
				color: #FF703A;
				font-size: calculateRem(15px);
				&:after{
					content: '';
					display: inline-block;
					width: calculateRem(14px);
					height: calculateRem(14px);
					background: url(../images/drop-down-normal@2x.png) no-repeat;
					background-size: 100%;
					vertical-align: middle;
					margin-left: calculateRem(4px);

				}

			}
		}
	}

	.footer{
		width: 100%;
		/*height: calculateRem(60px);*/
		height: auto;
		padding: 0 calculateRem(10px) calculateRem(8px);
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: white;
		.confirmSign{
			display: block;
			width: 100%;
			height: calculateRem(50px);
			background: #E62622;
			border-radius: calculateRem(5px);
			color: white;
			font-size: calculateRem(20px);
			text-align: center;
			line-height: calculateRem(50px);
			&:active{
				background: #C51B0D;
			}
		}
	}

}